<template>
    <div class="h100">
        <div class="bottom-ctn">
            <header class="info">
                <div>1. 在这里批量添加{{fgObjTitle || '数据'}}。</div>
                <div>2. 管理员仅能在具有管理权限范围的组织下创建{{fgObjTitle || '数据'}}。</div>
                <div>3. 如果导入{{fgObjTitle || '数据'}}已经存在于某个单位，该条信息将导入失败。</div>
            </header>
            <section class="step-area">
                <div class="steps">
                    <nav class="primay-color bold t-center num-o">1</nav>
                    <span class="bold">下载{{fgObjTitle || '数据'}}模板填写{{fgObjTitle || '数据'}}信息</span>
                    <el-button type="primary" @click="downloadTpl">下载模板</el-button>
                </div>
                <div class="steps">
                    <nav class="primay-color bold t-center num-o">2</nav>
                    <span class="bold">上传填写好的{{fgObjTitle || '数据'}}信息表格</span>
                    <file-upload
                            :allowType="['xls', 'xlsx']" :onSuccess="handleUploadSuccess"
                            :fileList="files"
                            :onRemove="handleUploadRemove"
                            :download="true"
                            :loading.sync="loading"
                            class="inlnb flex-upld"
                    >
                        <el-button v-html="'选择文件'"></el-button>
                    </file-upload>
                </div>
            </section>
        </div>
        <footer class="flex-center bottom-bts">
            <el-button @click="$router.back()" size="medium">返回</el-button>
            <el-button type="primary" @click="startImport" size="medium" :loading="loading">开始导入</el-button>
        </footer>
        <iframe ref="iframe1" style="display: none"></iframe>
    </div>
</template>

<script>
import FileUpload from 'party_fe_component/src/components/upload/fileUpload';

export default {
    mixins: [require('../common/textConfigMixin').default],
    components: { FileUpload },
    data() {
        return {
            files: [],
            loading: false,
        }
    },
    created() {
        this.loadSceneConfigs('import' + this.$route.query.formName)
    },
    methods: {
        downloadTpl() {
            // 子类覆盖此方法
        },
        async startImport() {
            // 子类覆盖此方法
            if (this.files.length === 0) {
                return this.$x.toast.warning(this.fgTexts.uploadFirst || '请先上传需导入的附件')
            }
            this.loading = true
            await this.callImport().finally(t => this.loading = false)
            this.$emit('importDone')
        },
        handleUploadSuccess(response, file, fileList) {
            file.fileId = response.fileId
            this.files = [file]
        },
        handleUploadRemove(file, fileList) {
            var index = this.files.findIndex(attach => attach.fileId === file.fileId)
            if (index > -1) this.files.splice(index, 1)
        },
    },
    computed: {
        fgObjTitle() {
            return this.$route.query.objTitle
        },
    },
}
</script>

<style scoped lang="scss">
    @import "../../css/defines";

    .info {
        background: #F2F2F2;
        padding: 15px 20px;
        line-height: 24px;
    }

    .num-o {
        width: 24px;
        height: 24px;
        line-height: 22px;
        font-size: 14px;
        display: inline-block;
        border: 1px solid $--color-primary;
        border-radius: 100px;
    }

    .step-area {
        border: 1px solid #DDD;
        margin-top: 20px;
        padding: 40px 30px;
    }

    .steps {
        &:not(:last-child) {
            margin-bottom: 40px;
        }

        > span {
            font-size: 14px;
            margin: 0 10px;
        }
    }

    .flex-upld {
        /deep/ .upload-file {
            display: inline-flex;
        }
    }

    .step-area /deep/ .el-upload-list__item {
        margin-top: 4px;
    }
</style>
